<template>
	<view v-if="isSearchStatic"  class="show container" :animation="animationData" >
		<view class="module1">
			<view class="search">
				<image src="https://images.linglinggong.net/search1.png" mode=""></image>
				<input @confirm="handleInput(word)" v-model="word" :focus="isSearchStatic||false" maxlength="12"
					type="text" placeholder="请输入工作名称" placeholder-style="color:#7F7F7F;">
			</view>
			<view class="cancel" @click="cancel()"> 取消 </view>
		</view>
		<view class="module2"  v-if="isShowCard">
			<view class="head">
				<text>搜索历史</text>
				<view class="delete" @click="handleCloseHistory()">
					<image src="https://images.linglinggong.net/delete.png" mode=""></image>
					<text>清空</text>
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in historyList.slice(0,3)" :key="index"
					@click="handleSelectName(item)">
					{{item}}
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: "search",
		props: {
			isSearchStatic: {
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {
				historyList: [],
				word: '',
				isShowCard:true,
				isRotate: false,//是否旋转
			};
		},
   
		methods: {
			
			cancel() {
				this.word = ''
				this.$emit('searchName', '')
				this.$emit('changeSearchStatus', false)
				// this.$emit('refresh')
				this.isShowCard = true
			},
			// 清除历史记录缓存
			handleCloseHistory() {
				if (!this.historyList.length) return uni.showToast({
					title: '您没有历史记录需要清除~',
					icon: 'none'
				})
				this.historyList = []
				uni.removeStorageSync('historyList')
			},
			// 历史记录
			handleInput(word) {
				// 如果搜索关键字不为空，则将其缓存起来
				if (word.trim().length) {
					//如果历史搜索关键字已存在，则删除过去历史关键字
					if (this.historyList.includes(word)) {
						let index = this.historyList.indexOf(word)
						this.historyList.splice(index, 1)
					}
					this.historyList.unshift(word)
					if (this.historyList.length >= 12) this.historyList.pop(this.historyList[this.historyList.length - 1])
					uni.setStorageSync('historyList', this.historyList)
					// this.$emit('changeSearchStatus', false)
					this.$emit('searchName', word)
					this.isShowCard = false
				} else {
					// this.$emit('changeSearchStatus', false)
					this.$emit('searchName', word)
					this.isShowCard = true
				}
				// this.word = ''
			},
			// 选中搜索关键字
			handleSelectName(word) {
				this.word = word
				this.isShowCard = false
				// this.$emit('changeSearchStatus', false)
				this.$emit('searchName', word)
			},
		},
		mounted() {
			this.historyList = uni.getStorageSync('historyList') || []
		}
	}
</script>
<style lang="less" scoped>
	.container {
		width: 100%;
		padding: 0 30rpx;
		// height:262rpx;
		box-sizing: border-box;
		background-color: #fff;
		position: fixed;
		top: calc(var(--status-bar-height) + 100rpx);
		z-index: 97;
		transition: height .5s;
		overflow: hidden;
		color: #000000;
		box-shadow: rgba(70, 79, 91, 0.39) 0rpx 8rpx 8rpx 2rpx;
		transform: translateY(-66rpx);
		.show {
			
			height: 262rpx;
			box-shadow: rgba(70, 79, 91, 0.39) 0rpx 8rpx 8rpx 2rpx;
		}

		.module1 {
			height: 60rpx;
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;

			.search {
				width: 516rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #F1F1F5;
				border-radius: 32rpx 0rpx 0rpx 32rpx;
				padding-left: 20rpx;
				box-sizing: border-box;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}

				input {
					flex: 1;
				}
			}

			.cancel {
				width: 180rpx;
				text-align: center;
				line-height: 60rpx;
				background-color: #FCC92D;
				border-radius: 0rpx 32rpx 32rpx 0rpx;
			}
		}

		.module2 {
			margin-top: 30rpx;
			font-size: 24rpx;
			margin-bottom: 30rpx;
			.head {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.delete {
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #7F7F7F;

					image {
						width: 20rpx;
						height: 20rpx;
						margin-right: 15rpx;
					}
				}
			}

			.list {
				margin-top: 30rpx;
				display: flex;

				.item {
					height: 50rpx;
					line-height: 50rpx;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					padding: 0 15rpx;
					border: 1px solid #EDEDED;
					margin-right: 20rpx;
					white-space: nowrap;
				}
			}
		}
	}
</style>